Project Settings Operations h4 Expand/Collapse 2/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 Grafana authentication. This enables the expand/collapse
behavior on-click/on-tap for the h4 headers.

app/assets/javascripts/grafana_integration/components/grafana_integration.vue

@@ -54,7 +54,9 @@ export default {
 <template>
   <section id="grafana" class="settings no-animate js-grafana-integration">
     <div class="settings-header">
-      <h4 class="js-section-header">
+      <h4
+        class="js-section-header settings-title js-settings-toggle js-settings-toggle-trigger-only"
+      >
         {{ s__('GrafanaIntegration|Grafana authentication') }}
       </h4>
       <gl-button class="js-settings-toggle">{{ __('Expand') }}</gl-button>

changelogs/unreleased/205484-prj-set-ops-2-grafana.yml

+---
+title: Project Settings Operations header Grafana authentication expand/collapse on-click/on-tap
+merge_request: 56270
+author: Daniel Schömer
+type: changed

spec/frontend/grafana_integration/components/__snapshots__/grafana_integration_spec.js.snap

@@ -9,7 +9,7 @@ exports[`grafana integration component default state to match the default snapsh
     class="settings-header"
   >
     <h4
-      class="js-section-header"
+      class="js-section-header settings-title js-settings-toggle js-settings-toggle-trigger-only"
     >
       
       Grafana authentication