Merge branch '343990-implement-ux-designs-for-failed-webhooks-400-error-range' into 'master'

Add error alerts and badge for webhooks

See merge request gitlab-org/gitlab!76871

app/views/admin/hooks/edit.html.haml

 - add_to_breadcrumbs @hook.pluralized_name, admin_hooks_path
 - page_title _('Edit System Hook')
 
+= render 'shared/web_hooks/hook_errors', hook: @hook
+
 .row.gl-mt-3
   .col-lg-3
     = render 'shared/web_hooks/title_and_docs', hook: @hook

app/views/projects/hooks/edit.html.haml

@@ -2,19 +2,7 @@
 - add_to_breadcrumbs _('Webhook Settings'), project_hooks_path(@project)
 - page_title _('Webhook')
 
-- if @hook.rate_limited?
-  - placeholders = { strong_start: '<strong>'.html_safe,
-    strong_end: '</strong>'.html_safe,
-    limit: @hook.rate_limit,
-    support_link_start: '<a href="https://support.gitlab.com/hc/en-us/requests/new">'.html_safe,
-    support_link_end: '</a>'.html_safe }
-  = render 'shared/global_alert',
-    title: s_('Webhooks|Webhook was automatically disabled'),
-    variant: :danger,
-    is_contained: true,
-    close_button_class: 'js-close' do
-    .gl-alert-body
-      = s_('Webhooks|The webhook was triggered more than %{limit} times per minute and is now disabled. To re-enable this webhook, fix the problems shown in %{strong_start}Recent events%{strong_end}, then re-test your settings. %{support_link_start}Contact Support%{support_link_end} if you need help re-enabling your webhook.').html_safe % placeholders
+= render 'shared/web_hooks/hook_errors', hook: @hook
 
 .row.gl-mt-3
   .col-lg-3

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

@@ -5,6 +5,10 @@
         = hook.url
         - if hook.rate_limited?
           %span.gl-badge.badge-danger.badge-pill.sm= _('Disabled')
+        - elsif hook.permanently_disabled?
+          %span.gl-badge.badge-danger.badge-pill.sm= s_('Webhooks|Failed to connect')
+        - elsif hook.temporarily_disabled?
+          %span.gl-badge.badge-warning.badge-pill.sm= s_('Webhooks|Fails to connect')
 
       %div
         - hook.class.triggers.each_value do |trigger|

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

+- strong_start = '<strong>'.html_safe
+- strong_end = '</strong>'.html_safe
+- link_start = '<a href="%{url}">'.html_safe
+- link_end = '</a>'.html_safe
+
+- if hook.rate_limited?
+  - support_path = 'https://support.gitlab.com/hc/en-us/requests/new'
+  - placeholders = { strong_start: strong_start,
+    strong_end: strong_end,
+    limit: hook.rate_limit,
+    support_link_start: link_start % { url: support_path },
+    support_link_end: link_end }
+  = render 'shared/global_alert',
+    title: s_('Webhooks|Webhook was automatically disabled'),
+    variant: :danger,
+    is_contained: true,
+    close_button_class: 'js-close' do
+    .gl-alert-body
+      = s_('Webhooks|The webhook was triggered more than %{limit} times per minute and is now disabled. To re-enable this webhook, fix the problems shown in %{strong_start}Recent events%{strong_end}, then re-test your settings. %{support_link_start}Contact Support%{support_link_end} if you need help re-enabling your webhook.').html_safe % placeholders
+- elsif hook.permanently_disabled?
+  = render 'shared/global_alert',
+    title: s_('Webhooks|Webhook failed to connect'),
+    variant: :danger,
+    is_contained: true,
+    close_button_class: 'js-close' do
+    .gl-alert-body
+      = s_('Webhooks|The webhook failed to connect, and is disabled. To re-enable it, check %{strong_start}Recent events%{strong_end} for error details, then test your settings below.').html_safe % { strong_start: strong_start, strong_end: strong_end }
+- elsif hook.temporarily_disabled?
+  - help_path = help_page_path('user/project/integrations/webhooks', anchor: 'webhook-fails-or-multiple-webhook-requests-are-triggered')
+  - placeholders = { strong_start: strong_start,
+    strong_end: strong_end,
+    retry_time: time_interval_in_words(hook.disabled_until - Time.now),
+    help_link_start: link_start % { url: help_path },
+    help_link_end: link_end }
+  = render 'shared/global_alert',
+    title: s_('Webhooks|Webhook fails to connect'),
+    variant: :warning,
+    is_contained: true,
+    close_button_class: 'js-close' do
+    .gl-alert-body
+      = s_('Webhooks|The webhook %{help_link_start}failed to connect%{help_link_end}, and will retry in %{retry_time}. To re-enable it, check %{strong_start}Recent events%{strong_end} for error details, then test your settings below.').html_safe % placeholders

ee/app/views/groups/hooks/edit.html.haml

 - add_to_breadcrumbs @hook.pluralized_name, group_hooks_path(@group)
 - page_title _('Edit Group Hook')
 
+= render 'shared/web_hooks/hook_errors', hook: @hook
+
 .row.gl-mt-3
   .col-lg-3
     = render 'shared/web_hooks/title_and_docs', hook: @hook

locale/gitlab.pot

@@ -39439,6 +39439,12 @@ msgstr ""
 msgid "Webhooks|Enable SSL verification"
 msgstr ""
 
+msgid "Webhooks|Failed to connect"
+msgstr ""
+
+msgid "Webhooks|Fails to connect"
+msgstr ""
+
 msgid "Webhooks|Feature flag events"
 msgstr ""
 
@@ -39475,6 +39481,12 @@ msgstr ""
 msgid "Webhooks|Tag push events"
 msgstr ""
 
+msgid "Webhooks|The webhook %{help_link_start}failed to connect%{help_link_end}, and will retry in %{retry_time}. To re-enable it, check %{strong_start}Recent events%{strong_end} for error details, then test your settings below."
+msgstr ""
+
+msgid "Webhooks|The webhook failed to connect, and is disabled. To re-enable it, check %{strong_start}Recent events%{strong_end} for error details, then test your settings below."
+msgstr ""
+
 msgid "Webhooks|The webhook was triggered more than %{limit} times per minute and is now disabled. To re-enable this webhook, fix the problems shown in %{strong_start}Recent events%{strong_end}, then re-test your settings. %{support_link_start}Contact Support%{support_link_end} if you need help re-enabling your webhook."
 msgstr ""
 
@@ -39535,6 +39547,12 @@ msgstr ""
 msgid "Webhooks|Use this token to validate received payloads. It is sent with the request in the X-Gitlab-Token HTTP header."
 msgstr ""
 
+msgid "Webhooks|Webhook failed to connect"
+msgstr ""
+
+msgid "Webhooks|Webhook fails to connect"
+msgstr ""
+
 msgid "Webhooks|Webhook was automatically disabled"
 msgstr ""
 

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

@@ -30,4 +30,29 @@ RSpec.describe 'projects/hooks/edit' do
       expect(rendered).to have_text(s_('Webhooks|Webhook was automatically disabled'))
     end
   end
+
+  context 'webhook is permanently disabled' do
+    before do
+      allow(hook).to receive(:permanently_disabled?).and_return(true)
+    end
+
+    it 'renders alert' do
+      render
+
+      expect(rendered).to have_text(s_('Webhooks|Webhook failed to connect'))
+    end
+  end
+
+  context 'webhook is temporarily disabled' do
+    before do
+      allow(hook).to receive(:temporarily_disabled?).and_return(true)
+      allow(hook).to receive(:disabled_until).and_return(Time.now + 10.minutes)
+    end
+
+    it 'renders alert' do
+      render
+
+      expect(rendered).to have_text(s_('Webhooks|Webhook fails to connect'))
+    end
+  end
 end

spec/views/projects/hooks/index.html.haml_spec.rb

@@ -20,6 +20,8 @@ RSpec.describe 'projects/hooks/index' do
     expect(rendered).to have_css('h4', text: _('Webhooks'))
     expect(rendered).to have_text('Project Hooks')
     expect(rendered).not_to have_css('.gl-badge', text: _('Disabled'))
+    expect(rendered).not_to have_css('.gl-badge', text: s_('Webhooks|Failed to connect'))
+    expect(rendered).not_to have_css('.gl-badge', text: s_('Webhooks|Fails to connect'))
   end
 
   context 'webhook is rate limited' do
@@ -33,4 +35,28 @@ RSpec.describe 'projects/hooks/index' do
       expect(rendered).to have_css('.gl-badge', text: _('Disabled'))
     end
   end
+
+  context 'webhook is permanently disabled' do
+    before do
+      allow(existing_hook).to receive(:permanently_disabled?).and_return(true)
+    end
+
+    it 'renders "Failed to connect" badge' do
+      render
+
+      expect(rendered).to have_css('.gl-badge', text: s_('Webhooks|Failed to connect'))
+    end
+  end
+
+  context 'webhook is temporarily disabled' do
+    before do
+      allow(existing_hook).to receive(:temporarily_disabled?).and_return(true)
+    end
+
+    it 'renders "Fails to connect" badge' do
+      render
+
+      expect(rendered).to have_css('.gl-badge', text: s_('Webhooks|Fails to connect'))
+    end
+  end
 end