From b4b42eea0fe339be2b858ad3decf193a47228473 Mon Sep 17 00:00:00 2001
From: Sascha Eggenberger <seggenberger@gitlab.com>
Date: Thu, 16 Jan 2025 11:54:00 +0100
Subject: [PATCH] Integration settings: Migrate section to SettingsSection

---
 .../edit/components/integration_form.vue      |  5 ++--
 .../components/integration_forms/section.vue  | 22 ++++++++++------
 .../components/settings/settings_section.vue  | 26 ++++++++++++++++---
 .../settings/integrations/_form.html.haml     |  3 ++-
 .../integration_forms/section_spec.js         |  2 ++
 5 files changed, 42 insertions(+), 16 deletions(-)

diff --git a/app/assets/javascripts/integrations/edit/components/integration_form.vue b/app/assets/javascripts/integrations/edit/components/integration_form.vue
index a296c279a524a4..1405f61ba68499 100644
--- a/app/assets/javascripts/integrations/edit/components/integration_form.vue
+++ b/app/assets/javascripts/integrations/edit/components/integration_form.vue
@@ -196,7 +196,7 @@ export default {
   <gl-form
     ref="integrationForm"
     method="post"
-    class="gl-show-field-errors gl-mb-3 gl-mt-6"
+    class="gl-show-field-errors"
     data-testid="integration-settings-form"
     :action="propsSource.formPath"
     :novalidate="!integrationActive"
@@ -251,11 +251,10 @@ export default {
 
     <template v-if="hasSections">
       <integration-form-section
-        v-for="(section, index) in customState.sections"
+        v-for="section in customState.sections"
         :key="section.type"
         :section="section"
         :is-validated="isValidated"
-        :class="{ 'gl-border-b gl-mb-6 gl-pb-3': index !== customState.sections.length - 1 }"
         @toggle-integration-active="onToggleIntegrationState"
         @request-jira-issue-types="onRequestJiraIssueTypes"
       />
diff --git a/app/assets/javascripts/integrations/edit/components/integration_forms/section.vue b/app/assets/javascripts/integrations/edit/components/integration_forms/section.vue
index 7f0f167919a7cf..79bd7e93cf9275 100644
--- a/app/assets/javascripts/integrations/edit/components/integration_forms/section.vue
+++ b/app/assets/javascripts/integrations/edit/components/integration_forms/section.vue
@@ -4,11 +4,13 @@ import { GlBadge } from '@gitlab/ui';
 import { mapGetters } from 'vuex';
 import SafeHtml from '~/vue_shared/directives/safe_html';
 import { integrationFormSectionComponents, billingPlanNames } from '~/integrations/constants';
+import SettingsSection from '~/vue_shared/components/settings/settings_section.vue';
 
 export default {
   name: 'IntegrationFormSection',
   components: {
     GlBadge,
+    SettingsSection,
     IntegrationSectionConfiguration: () =>
       import(
         /* webpackChunkName: 'integrationSectionConfiguration' */ '~/integrations/edit/components/sections/configuration.vue'
@@ -76,22 +78,26 @@ export default {
 };
 </script>
 <template>
-  <section>
-    <h4 v-if="section.title" class="gl-mt-0">
-      {{ section.title
-      }}<gl-badge
+  <settings-section
+    heading-classes="gl-inline-flex gl-flex-wrap gl-gap-x-3 gl-gap-y-2 gl-items-center"
+  >
+    <template v-if="section.title" #heading>
+      {{ section.title }}
+      <gl-badge
         v-if="section.plan"
         :href="propsSource.aboutPricingUrl"
         target="_blank"
         rel="noopener noreferrer"
         variant="tier"
         icon="license"
-        class="gl-ml-3"
       >
         {{ $options.billingPlanNames[section.plan] }}
       </gl-badge>
-    </h4>
-    <p v-safe-html="section.description"></p>
+    </template>
+
+    <template #description>
+      <span v-safe-html="section.description"></span>
+    </template>
 
     <component
       :is="$options.integrationFormSectionComponents[section.type]"
@@ -100,5 +106,5 @@ export default {
       @toggle-integration-active="$emit('toggle-integration-active', $event)"
       @request-jira-issue-types="$emit('request-jira-issue-types', $event)"
     />
-  </section>
+  </settings-section>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/settings/settings_section.vue b/app/assets/javascripts/vue_shared/components/settings/settings_section.vue
index 65412fafc792b6..fed97885e1804f 100644
--- a/app/assets/javascripts/vue_shared/components/settings/settings_section.vue
+++ b/app/assets/javascripts/vue_shared/components/settings/settings_section.vue
@@ -6,25 +6,43 @@ export default {
       required: false,
       default: '',
     },
-    description: {
+    headingClasses: {
       type: String,
       required: false,
       default: null,
     },
+    description: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+  computed: {
+    hasHeading() {
+      return this.$scopedSlots.heading || this.heading;
+    },
+    hasDescription() {
+      return this.$scopedSlots.description || this.description;
+    },
   },
 };
 </script>
 
 <template>
   <section class="settings-section js-search-settings-section">
-    <div class="settings-sticky-header">
+    <div v-if="hasHeading || hasDescription" class="settings-sticky-header">
       <div class="settings-sticky-header-inner">
-        <h2 class="gl-heading-2 !gl-mb-3" data-testid="settings-section-heading">
+        <h2
+          v-if="hasHeading"
+          class="gl-heading-2 !gl-mb-3"
+          :class="headingClasses"
+          data-testid="settings-section-heading"
+        >
           <slot v-if="$scopedSlots.heading" name="heading"></slot>
           <template v-else>{{ heading }}</template>
         </h2>
         <p
-          v-if="$scopedSlots.description || description"
+          v-if="hasDescription"
           class="gl-mb-3 gl-text-subtle"
           data-testid="settings-section-description"
         >
diff --git a/app/views/projects/settings/integrations/_form.html.haml b/app/views/projects/settings/integrations/_form.html.haml
index 2da5315b7f7c44..d106e40620460c 100644
--- a/app/views/projects/settings/integrations/_form.html.haml
+++ b/app/views/projects/settings/integrations/_form.html.haml
@@ -7,7 +7,8 @@
   -# For example, we can get the link to each tracker with scoped_edit_integration_path(tracker, tracker.project)
   = render Pajamas::AlertComponent.new(title: s_('ExternalIssueIntegration|Another issue tracker is already in use'),
     variant: :warning,
-    dismissible: false) do |c|
+    dismissible: false,
+    alert_options: { class: 'gl-mb-5' }) do |c|
     - c.with_body do
       = s_('ExternalIssueIntegration|Only one issue tracker integration can be active at a time. Please disable the active tracker first and try again.')
 
diff --git a/spec/frontend/integrations/edit/components/integration_forms/section_spec.js b/spec/frontend/integrations/edit/components/integration_forms/section_spec.js
index 5f82941778e51f..487d82c5dc9988 100644
--- a/spec/frontend/integrations/edit/components/integration_forms/section_spec.js
+++ b/spec/frontend/integrations/edit/components/integration_forms/section_spec.js
@@ -4,6 +4,7 @@ import { billingPlans, billingPlanNames } from '~/integrations/constants';
 import DynamicField from '~/integrations/edit/components/dynamic_field.vue';
 import IntegrationFormSection from '~/integrations/edit/components/integration_forms/section.vue';
 import IntegrationSectionConnection from '~/integrations/edit/components/sections/connection.vue';
+import SettingsSection from '~/vue_shared/components/settings/settings_section.vue';
 import { createStore } from '~/integrations/edit/store';
 import {
   mockIntegrationProps,
@@ -39,6 +40,7 @@ describe('Integration Form Section', () => {
       },
       stubs: {
         IntegrationSectionConnection,
+        SettingsSection,
       },
     });
   };
-- 
GitLab