Project Settings Operations h4 Expand/Collapse 1/5

Project Settings General Headers (h4 elements) expand/collapse on
mouse-click / tap, like using the Expand/Collapse button. Other h4
headers in other Project Settings pages do not expande/collapse on
mouse-click / tap, but only using the Expand/Collapse button. This may
seem inconsistent to the user.

The h4 headers of Project Settings General get the expand/collapse
behavior through classes settings-title, js-settings-toggle and
js-settings-toggle-trigger-only.

This MR adds classes settings-title, js-settings-toggle and
js-settings-toggle-trigger-only to the h4 headers in Project Settings
Operations Alert management, Error tracking, Jaeger tracing and
Prometheus. This enables the expand/collapse behavior on on-click /
on-tap for the h4 headers.

app/views/projects/settings/operations/_alert_management.html.haml

@@ -5,7 +5,7 @@
 
 %section.settings.no-animate#js-alert-management-settings{ class: ('expanded' if expanded) }
   .settings-header
-    %h4
+    %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only
       = _('Alerts')
     %button.btn.js-settings-toggle{ type: 'button' }
       = _('Expand')

app/views/projects/settings/operations/_error_tracking.html.haml

@@ -4,7 +4,7 @@
 
 %section.settings.no-animate.js-error-tracking-settings
   .settings-header
-    %h4
+    %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only
       = _('Error tracking')
     %button.btn.js-settings-toggle{ type: 'button' }
       = _('Expand')

app/views/projects/settings/operations/_prometheus.html.haml

 %section.settings.no-animate.js-prometheus-settings
   .settings-header
-    %h4
+    %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only
       = _('Prometheus')
     %button.btn.js-settings-toggle{ type: 'button' }
       = _('Expand')

app/views/projects/settings/operations/_tracing.html.haml

@@ -3,7 +3,7 @@
 
 %section.settings.border-0.no-animate
   .settings-header{ :class => "border-top" }
-    %h4
+    %h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only
       = _("Jaeger tracing")
     %button.btn.gl-button.js-settings-toggle{ type: 'button' }
       = _('Expand')

changelogs/unreleased/205484-prj-set-ops-1-alert-error-prom-trace.yml

+---
+title: Project Settings Operations headers Alerts/Error tracking/Jeager tracing/Jeager
+  tracing expand/collapse on-click/on-tap
+merge_request: 56269
+author: Daniel Schömer
+type: changed