Project webhooks updated UI

Closes #13993

3 files changed, 101 insertions, 85 deletions

diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss
index 0a5b4b8834c..b2535ddf4bd 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;
@@ -259,3 +263,9 @@ h1, h2, h3, h4 {
     color: $gl-gray;
   }
 }
+
+.text-right-lg {
+  @media (min-width: $screen-lg-min) {
+    text-align: right;
+  }
+}
diff --git a/app/views/projects/hooks/_project_hook.html.haml b/app/views/projects/hooks/_project_hook.html.haml
new file mode 100644
index 00000000000..62eba5888a4
--- /dev/null
+++ b/app/views/projects/hooks/_project_hook.html.haml
@@ -0,0 +1,15 @@
+%li
+  .row
+    .col-md-8.col-lg-7
+      %strong.light-header= hook.url
+      %div
+        - %w(push_events tag_push_events issues_events note_events merge_requests_events build_events).each do |trigger|
+          - if hook.send(trigger)
+            %span.label.label-gray.deploy-project-label= trigger.titleize
+    .col-md-4.col-lg-5.text-right-lg.prepend-top-5
+      %span.append-right-10.inline
+        SSL Verification: #{hook.enable_ssl_verification ? "enabled" : "disabled"}
+      = link_to "Test", test_namespace_project_hook_path(@project.namespace, @project, hook), class: "btn btn-sm"
+      = link_to namespace_project_hook_path(@project.namespace, @project, hook), data: { confirm: 'Are you sure?'}, method: :delete, class: "btn btn-transparent" do
+        %span.sr-only Remove
+        = icon('trash')
diff --git a/app/views/projects/hooks/index.html.haml b/app/views/projects/hooks/index.html.haml
index aae3abcad4b..6f1ee209430 100644
--- a/app/views/projects/hooks/index.html.haml
+++ b/app/views/projects/hooks/index.html.haml
@@ -1,88 +1,79 @@
 - page_title "Webhooks"
-%h3.page-title
-  Webhooks
+.row.prepend-top-default
+  .col-lg-3.profile-settings-sidebar
+    %h4.prepend-top-0
+      = page_title
+    %p
+      #{link_to "Webhooks", help_page_path("web_hooks", "web_hooks")} can be
+      used for binding events when something is happening within the project.
+  .col-lg-9.append-bottom-default
+    %h5.prepend-top-0
+      Add new webhook
+    = form_for [@project.namespace.becomes(Namespace), @project, @hook], as: :hook, url: namespace_project_hooks_path(@project.namespace, @project) do |f|
+      = form_errors(@hook)
 
-%p.light
-  #{link_to "Webhooks ", help_page_path("web_hooks", "web_hooks"), class: "vlink"} can be
-  used for binding events when something is happening within the project.
-
-%hr.clearfix
-
-= form_for [@project.namespace.becomes(Namespace), @project, @hook], as: :hook, url: namespace_project_hooks_path(@project.namespace, @project), html: { class: 'form-horizontal' } do |f|
-  = form_errors(@hook)
-
-  .form-group
-    = f.label :url, "URL", class: 'control-label'
-    .col-sm-10
-      = f.text_field :url, class: "form-control", placeholder: 'http://example.com/trigger-ci.json'
-  .form-group
-    = f.label :url, "Trigger", class: 'control-label'
-    .col-sm-10.prepend-top-10
-      %div
-        = f.check_box :push_events, class: 'pull-left'
-        .prepend-left-20
-          = f.label :push_events, class: 'list-label' do
-            %strong Push events
-          %p.light
-            This url will be triggered by a push to the repository
-      %div
-        = f.check_box :tag_push_events, class: 'pull-left'
-        .prepend-left-20
-          = f.label :tag_push_events, class: 'list-label' do
-            %strong Tag push events
-          %p.light
-            This url will be triggered when a new tag is pushed to the repository
-      %div
-        = f.check_box :note_events, class: 'pull-left'
-        .prepend-left-20
-          = f.label :note_events, class: 'list-label' do
-            %strong Comments
-          %p.light
-            This url will be triggered when someone adds a comment
-      %div
-        = f.check_box :issues_events, class: 'pull-left'
-        .prepend-left-20
-          = f.label :issues_events, class: 'list-label' do
-            %strong Issues events
-          %p.light
-            This url will be triggered when an issue is created/updated/merged
-      %div
-        = f.check_box :merge_requests_events, class: 'pull-left'
-        .prepend-left-20
-          = f.label :merge_requests_events, class: 'list-label' do
-            %strong Merge Request events
-          %p.light
-            This url will be triggered when a merge request is created/updated/merged
-      %div
-        = f.check_box :build_events, class: 'pull-left'
-        .prepend-left-20
-          = f.label :build_events, class: 'list-label' do
-            %strong Build events
-          %p.light
-            This url will be triggered when the build status changes
-  .form-group
-    = f.label :enable_ssl_verification, "SSL verification", class: 'control-label checkbox'
-    .col-sm-10
-      .checkbox
-        = f.label :enable_ssl_verification do
-          = f.check_box :enable_ssl_verification
-          %strong Enable SSL verification
-  .form-actions
-    = f.submit "Add Webhook", class: "btn btn-create"
-
--if @hooks.any?
-  .panel.panel-default
-    .panel-heading
+      .form-group
+        = f.label :url, "URL", class: "label-light"
+        = f.text_field :url, class: "form-control", placeholder: "http://example.com/trigger-ci.json"
+      .form-group
+        = f.label :url, "Trigger", class: "label-light"
+        %div
+          = f.check_box :push_events, class: "pull-left"
+          .prepend-left-20
+            = f.label :push_events, class: "label-light append-bottom-0" do
+              Push events
+            %p.light
+              This url will be triggered by a push to the repository
+        %div
+          = f.check_box :tag_push_events, class: "pull-left"
+          .prepend-left-20
+            = f.label :tag_push_events, class: "label-light append-bottom-0" do
+              Tag push events
+            %p.light
+              This url will be triggered when a new tag is pushed to the repository
+        %div
+          = f.check_box :note_events, class: "pull-left"
+          .prepend-left-20
+            = f.label :note_events, class: "label-light append-bottom-0" do
+              Comments
+            %p.light
+              This url will be triggered when someone adds a comment
+        %div
+          = f.check_box :issues_events, class: "pull-left"
+          .prepend-left-20
+            = f.label :issues_events, class: "label-light append-bottom-0" do
+              Issues events
+            %p.light
+              This url will be triggered when an issue is created/updated/merged
+        %div
+          = f.check_box :merge_requests_events, class: "pull-left"
+          .prepend-left-20
+            = f.label :merge_requests_events, class: "label-light append-bottom-0" do
+              Merge Request events
+            %p.light
+              This url will be triggered when a merge request is created/updated/merged
+        %div
+          = f.check_box :build_events, class: "pull-left"
+          .prepend-left-20
+            = f.label :build_events, class: "label-light append-bottom-0" do
+              Build events
+            %p.light
+              This url will be triggered when the build status changes
+      .form-group
+        = f.label :enable_ssl_verification, "SSL verification", class: "label-light"
+        %div
+          = f.check_box :enable_ssl_verification, class: "pull-left"
+          .prepend-left-20
+            = f.label :enable_ssl_verification, class: "label-light append-bottom-0" do
+              Enable SSL verification
+      = f.submit "Add Webhook", class: "btn btn-create"
+    %hr
+    %h5.prepend-top-default
       Webhooks (#{@hooks.count})
-    %ul.content-list
-      - @hooks.each do |hook|
-        %li
-          .controls
-            = link_to 'Test Hook', test_namespace_project_hook_path(@project.namespace, @project, hook), class: "btn btn-sm btn-grouped"
-            = link_to 'Remove', namespace_project_hook_path(@project.namespace, @project, hook), data: { confirm: 'Are you sure?'}, method: :delete, class: "btn btn-remove btn-sm btn-grouped"
-          .monospace= hook.url
-          %div
-            - %w(push_events tag_push_events issues_events note_events merge_requests_events build_events).each do |trigger|
-              - if hook.send(trigger)
-                %span.label.label-gray= trigger.titleize
-            %span.label.label-gray SSL Verification: #{hook.enable_ssl_verification ? "enabled" : "disabled"}
+    - if @hooks.any?
+      %ul.well-list
+        - @hooks.each do |hook|
+          = render "project_hook", hook: hook
+    - else
+      %p.profile-settings-message.text-center.append-bottom-0
+        No webhooks found, add one in the form above.