Recent deliveries table - UI polish

app/views/admin/hook_logs/_index.html.haml

+- docs_link_url = help_page_path('user/project/integrations/webhooks', anchor: 'troubleshoot-webhooks')
+- link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: docs_link_url }
+- link_end = '</a>'.html_safe
+
 .row.gl-mt-3.gl-mb-3
   .col-lg-3
     %h4.gl-mt-0
-      = _('Recent Deliveries')
-    %p= _('When an event in GitLab triggers a webhook, you can use the request details to figure out if something went wrong.')
+      = _('Recent events')
+    %p= _('GitLab events trigger webhooks. Use the request details of a webhook to help troubleshoot problems. %{link_start}How do I troubleshoot?%{link_end}').html_safe % { link_start: link_start, link_end: link_end }
   .col-lg-9
     = render partial: 'shared/hook_logs/recent_deliveries_table', locals: { hook: hook, hook_logs: hook_logs }

app/views/projects/hook_logs/_index.html.haml

+- docs_link_url = help_page_path('user/project/integrations/webhooks', anchor: 'troubleshoot-webhooks')
+- link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: docs_link_url }
+- link_end = '</a>'.html_safe
+
 .row.gl-mt-3.gl-mb-3
   .col-lg-3
     %h4.gl-mt-0
-      = _('Recent Deliveries')
-    %p= _('When an event in GitLab triggers a webhook, you can use the request details to figure out if something went wrong.')
+      = _('Recent events')
+    %p= _('GitLab events trigger webhooks. Use the request details of a webhook to help troubleshoot problems. %{link_start}How do I troubleshoot?%{link_end}').html_safe % { link_start: link_start, link_end: link_end }
   .col-lg-9
     = render partial: 'shared/hook_logs/recent_deliveries_table', locals: { hook: hook, hook_logs: hook_logs }

app/views/shared/hook_logs/_recent_deliveries_table.html.haml

-- if hook_logs.present?
-  %table.table
+%table.gl-table.gl-w-full
   %thead
     %tr
       %th= _('Status')
       %th.d-none.d-sm-table-cell= _('Trigger')
-        %th= _('URL')
       %th= _('Elapsed time')
       %th= _('Request time')
       %th
+
+  - if hook_logs.present?
     - hook_logs.each do |hook_log|
       %tr
         %td
           = render partial: 'shared/hook_logs/status_label', locals: { hook_log: hook_log }
         %td.d-none.d-sm-table-cell
-          %span.badge.badge-gray.deploy-project-label
+          %span.badge.badge-pill.gl-badge.badge-muted.sm
             = hook_log.trigger.singularize.titleize
-        %td
-          = truncate(hook_log.url, length: 50)
         %td
           #{number_with_precision(hook_log.execution_duration, precision: 2)} sec
         %td
@@ -24,8 +22,13 @@
         %td
           = link_to _('View details'), hook_log_path(hook, hook_log)
 
-  = paginate hook_logs, theme: 'gitlab'
 
+- if hook_logs.present?
+  = paginate hook_logs, theme: 'gitlab'
 - else
-  .settings-message.text-center
-    = _("You don't have any webhooks deliveries")
+  .gl-text-center.gl-mt-7
+    %h4= _('No webhook events')
+    %p
+      %span.gl-display-block= _('Webhook events will be displayed here.')
+      %span= _('Use the %{strongStart}Test%{strongEnd} option above to create an event.').html_safe % { strongStart: '<strong>'.html_safe, strongEnd: '</strong>'.html_safe }
+

app/views/shared/hook_logs/_status_label.html.haml

 - label_status = hook_log.success? ? 'badge-success' : 'badge-danger'
-%span{ class: "badge #{label_status}" }
+%span{ class: "badge badge-pill gl-badge sm #{label_status}" }
   = hook_log.internal_error? ? _('Error') : hook_log.response_status

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

@@ -5,12 +5,12 @@
       %div
         - hook.class.triggers.each_value do |trigger|
           - if hook.public_send(trigger)
-            %span.gl-badge.gl-bg-gray-10.gl-mt-2.rounded.deploy-project-label= trigger.to_s.titleize
-        %span.gl-badge.gl-bg-gray-10.gl-mt-2.rounded
+            %span.gl-badge.badge-muted.badge-pill.sm.gl-mt-2.deploy-project-label= trigger.to_s.titleize
+        %span.gl-badge.badge-muted.badge-pill.sm.gl-mt-2
           = _('SSL Verification:')
           = hook.enable_ssl_verification ? _('enabled') : _('disabled')
 
     .col-md-4.col-lg-5.text-right-md.gl-mt-2
       %span>= render 'shared/web_hooks/test_button', hook: hook, button_class: 'btn-sm btn-default gl-mr-3'
       %span>= link_to _('Edit'), edit_hook_path(hook), class: 'btn gl-button btn-default btn-sm gl-mr-3'
-      = link_to _('Delete'), destroy_hook_path(hook), data: { confirm: _('Are you sure?') }, method: :delete, class: 'btn gl-button btn-default btn-sm'
+      = link_to _('Delete'), destroy_hook_path(hook), data: { confirm: _('Are you sure?') }, method: :delete, class: 'btn gl-button btn-secondary btn-danger-secondary btn-sm'

doc/user/project/integrations/overview.md

@@ -83,22 +83,7 @@ Read more about [Project integration management](../../admin_area/settings/proje
 
 ## Troubleshooting integrations
 
-Some integrations use service hooks for integration with external applications. To confirm which ones use service hooks, see the [integrations listing](#integrations-listing) above. GitLab stores details of service hook requests made within the last 2 days. To view details of the requests, go to that integration's configuration page.
-
-The **Recent Deliveries** section lists the details of each request made within the last 2 days:
-
-- HTTP status code (green for 200-299 codes, red for the others, `internal error` for failed deliveries)
-- Triggered event
-- URL to which the request was sent
-- Elapsed time of the request
-- Relative time in which the request was made
-
-To view more information about the request's execution, click the respective **View details** link.
-On the details page, you can see the request headers and body sent and received by GitLab.
-
-To repeat a delivery using the same data, click **Resend Request**.
-
-![Recent deliveries](img/webhook_logs.png)
+Some integrations use service hooks for integration with external applications. To confirm which ones use service hooks, see the [integrations listing](#integrations-listing) above. Learn more about [troubleshooting service hooks](webhooks.md#troubleshoot-webhooks).
 
 ### Uninitialized repositories
 

doc/user/project/integrations/webhooks.md

@@ -1793,27 +1793,27 @@ For example, for triggering `Push Events` your project should have at least one
 
 ## Troubleshoot webhooks
 
-GitLab stores each perform of the webhook.
-You can find records for last 2 days in "Recent Deliveries" section on the edit page of each webhook.
+GitLab records the history of each webhook request.
+The **Recent events** table lists requests made within the last 2 days. The table is located on the **Edit** page for each webhook.
 
-![Recent deliveries](img/webhook_logs.png)
-
-In this section you can see:
-
-- HTTP status code (green for `200-299` codes, red for the others, `internal error` for failed deliveries).
-- Triggered event.
-- A time when the event was called.
-- Elapsed time of the request.
+The table includes the following details about each request:
 
-If you need more information about execution, you can click `View details` link.
-On this page, you can see data that GitLab sends (request headers and body) and data that it received (response headers and body).
+- HTTP status code (green for `200`-`299` codes, red for the others, and `internal error` for failed deliveries)
+- Triggered event
+- Elapsed time of the request
+- Relative time for when the request was made
 
-From this page, you can repeat delivery with the same data by clicking `Resend Request` button.
+![Recent deliveries](img/webhook_logs.png)
 
 NOTE:
-This history is unavailable for Group-level webhooks. For more information, read
+The **Recent events** table is unavailable for group-level webhooks. For more information, read
 [issue #325642](https://gitlab.com/gitlab-org/gitlab/-/issues/325642).
 
+Each webhook event has a corresponding **Details** page. This page details the data that GitLab sent (request headers and body) and received (response headers and body).
+To view the **Details** page, select **View details** for the webhook event.
+
+To repeat the delivery with the same data, select **Resend Request**.
+
 NOTE:
 If URL or secret token of the webhook were updated, data is delivered to the new address.
 

locale/gitlab.pot

@@ -15551,6 +15551,9 @@ msgstr ""
 msgid "GitLab commit"
 msgstr ""
 
+msgid "GitLab events trigger webhooks. Use the request details of a webhook to help troubleshoot problems. %{link_start}How do I troubleshoot?%{link_end}"
+msgstr ""
+
 msgid "GitLab export"
 msgstr ""
 
@@ -23210,6 +23213,9 @@ msgstr ""
 msgid "No vulnerabilities present"
 msgstr ""
 
+msgid "No webhook events"
+msgstr ""
+
 msgid "No webhooks found, add one in the form above."
 msgstr ""
 
@@ -28082,15 +28088,15 @@ msgstr ""
 msgid "Recent"
 msgstr ""
 
-msgid "Recent Deliveries"
-msgstr ""
-
 msgid "Recent Project Activity"
 msgstr ""
 
 msgid "Recent Searches Service is unavailable"
 msgstr ""
 
+msgid "Recent events"
+msgstr ""
+
 msgid "Recent jobs served by this runner"
 msgstr ""
 
@@ -37023,6 +37029,9 @@ msgstr ""
 msgid "Use template"
 msgstr ""
 
+msgid "Use the %{strongStart}Test%{strongEnd} option above to create an event."
+msgstr ""
+
 msgid "Use the link below to confirm your email address (%{email})"
 msgstr ""
 
@@ -38169,6 +38178,9 @@ msgstr ""
 msgid "Webhook Settings"
 msgstr ""
 
+msgid "Webhook events will be displayed here."
+msgstr ""
+
 msgid "Webhook:"
 msgstr ""
 
@@ -38373,9 +38385,6 @@ msgstr ""
 msgid "When a runner is locked, it cannot be assigned to other projects"
 msgstr ""
 
-msgid "When an event in GitLab triggers a webhook, you can use the request details to figure out if something went wrong."
-msgstr ""
-
 msgid "When enabled, existing personal access tokens may be revoked. Leave blank for no limit."
 msgstr ""
 
@@ -39068,9 +39077,6 @@ msgstr ""
 msgid "You don't have any recent searches"
 msgstr ""
 
-msgid "You don't have any webhooks deliveries"
-msgstr ""
-
 msgid "You don't have sufficient permission to perform this action."
 msgstr ""
 

spec/features/admin/admin_hook_logs_spec.rb

@@ -17,8 +17,8 @@ RSpec.describe 'Admin::HookLogs' do
     hook_log
     visit edit_admin_hook_path(system_hook)
 
-    expect(page).to have_content('Recent Deliveries')
-    expect(page).to have_content(hook_log.url)
+    expect(page).to have_content('Recent events')
+    expect(page).to have_link('View details', href: admin_hook_hook_log_path(system_hook, hook_log))
   end
 
   it 'show hook log details' do

spec/features/projects/settings/webhooks_settings_spec.rb

@@ -115,8 +115,8 @@ RSpec.describe 'Projects > Settings > Webhook Settings' do
         hook_log
         visit edit_project_hook_path(project, hook)
 
-        expect(page).to have_content('Recent Deliveries')
-        expect(page).to have_content(hook_log.url)
+        expect(page).to have_content('Recent events')
+        expect(page).to have_link('View details', href: hook_log.present.details_path)
       end
 
       it 'show hook log details' do

spec/views/projects/services/edit.html.haml_spec.rb

@@ -14,7 +14,7 @@ RSpec.describe 'projects/services/edit' do
   it do
     render
 
-    expect(rendered).not_to have_text('Recent Deliveries')
+    expect(rendered).not_to have_text('Recent events')
   end
 
   context 'integration using WebHooks' do
@@ -25,7 +25,7 @@ RSpec.describe 'projects/services/edit' do
     it do
       render
 
-      expect(rendered).to have_text('Recent Deliveries')
+      expect(rendered).to have_text('Recent events')
     end
   end
 end