Merge branch 'group-webhooks-ui' into 'master'

Updated webhooks UI

The webhooks files are in different places for EE & CE so this was missed when merging CE into EE.

## Group UI

![Screen_Shot_2016-05-17_at_10.05.39](/uploads/6e2942e478b574545b45989365307c24/Screen_Shot_2016-05-17_at_10.05.39.png)

## Project UI

![Screen_Shot_2016-05-17_at_10.06.08](/uploads/61380b40568bbc260932895be83d6bae/Screen_Shot_2016-05-17_at_10.06.08.png)

Closes https://gitlab.com/gitlab-org/gitlab-ce/issues/17525

See merge request !404

app/views/shared/web_hooks/_form.html.haml

 - page_title "Webhooks"
 - context_title = @project ? 'project' : 'group'
 
-%h3.page-title
+.row.prepend-top-default
+  .col-lg-3
+    %h4.prepend-top-0
+      = page_title
+    %p
+      #{link_to "Webhooks ", help_page_path("web_hooks", "web_hooks"), class: "vlink"} can be
+      used for binding events when something is happening within the #{context_title}.
+  .col-lg-9.append-bottom-default
+    = form_for hook, as: :hook, url: polymorphic_path(url_components + [:hooks]) do |f|
+      = form_errors(hook)
 
-  Webhooks
-
-%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 #{context_title}.
-
-%hr.clearfix
-
-= form_for hook, as: :hook, url: polymorphic_path(url_components + [:hooks]), 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 :token, "Secret Token", class: 'label-light'
-    = f.text_field :token, class: "form-control", placeholder: ''
-    %p.help-block
-      Use this token to validate received payloads
-  .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 :token, "Secret Token", class: 'label-light'
+        = f.text_field :token, class: "form-control", placeholder: ''
+        %p.help-block
+          Use this token to validate received payloads
+      .form-group
+        = f.label :url, "Trigger", class: 'label-light'
+        %ul.list-unstyled
+          %li
+            = 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
+          %li
+            = 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
+          %li
+            = 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
+          %li
+            = 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
+          %li
+            = 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
+          %li
+            = 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: 'label-light checkbox'
+        .checkbox
+          = f.label :enable_ssl_verification do
+            = f.check_box :enable_ssl_verification
+            %strong 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', polymorphic_path(url_components + [hook], action: :test), class: "btn btn-sm btn-grouped"
-            = link_to 'Remove', polymorphic_path(url_components + [hook]), data: { confirm: 'Are you sure?'}, method: :delete, class: "btn btn-remove btn-sm btn-grouped"
-          %p
-          .monospace= hook.url
-          %div
-            - %w(push_events tag_push_events issues_events note_events merge_requests_events build_events).each do |hook_type|
-              - if hook.send(hook_type)
-                %span.label.label-gray= hook_type.titleize
-            %span.label.label-gray SSL Verification: #{hook.enable_ssl_verification ? "enabled" : "disabled"}
+    - if hooks.any?
+      %ul.well-list
+        - hooks.each do |hook|
+          %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', polymorphic_path(url_components + [hook], action: :test), class: "btn btn-sm"
+                = link_to polymorphic_path(url_components + [hook]), data: { confirm: 'Are you sure?'}, method: :delete, class: "btn btn-transparent" do
+                  %span.sr-only Remove
+                  = icon('trash')
+    - else
+      %p.settings-message.text-center.append-bottom-0
+        No webhooks found, add one in the form above.

features/steps/group_hooks.rb

@@ -44,12 +44,12 @@ class Spinach::Features::GroupHooks < Spinach::FeatureSteps
 
   step 'I click test hook button' do
     stub_request(:post, @hook.url).to_return(status: 200)
-    click_link 'Test Hook'
+    click_link 'Test'
   end
 
   step 'I click test hook button with invalid URL' do
     stub_request(:post, @hook.url).to_raise(SocketError)
-    click_link 'Test Hook'
+    click_link 'Test'
   end
 
   step 'hook should be triggered' do