Add sections definition to integration fields

We are redesigning the page to be split into sections
to make it easier for users to configure an integration.

This change adds the sections definition (which fields
belong to a section, section title, and description) to
the backend model and passes it to the frontend.
It's added this way to keep all integration related data
in the backend.

app/assets/javascripts/integrations/edit/index.js

@@ -22,6 +22,7 @@ function parseDatasetToProps(data) {
     editProjectPath,
     learnMorePath,
     triggerEvents,
+    sections,
     fields,
     inheritFromId,
     integrationLevel,
@@ -81,6 +82,7 @@ function parseDatasetToProps(data) {
     },
     learnMorePath,
     triggerEvents: JSON.parse(triggerEvents),
+    sections: JSON.parse(sections, { deep: true }),
     fields: convertObjectPropsToCamelCase(JSON.parse(fields), { deep: true }),
     inheritFromId: parseInt(inheritFromId, 10),
     integrationLevel,

app/controllers/admin/integrations_controller.rb

@@ -5,6 +5,10 @@ class Admin::IntegrationsController < Admin::ApplicationController
 
   before_action :not_found, unless: -> { instance_level_integrations? }
 
+  before_action do
+    push_frontend_feature_flag(:integration_form_sections, default_enabled: :yaml)
+  end
+
   feature_category :integrations
 
   def overrides

app/controllers/groups/settings/integrations_controller.rb

@@ -7,6 +7,10 @@ module Groups
 
       before_action :authorize_admin_group!
 
+      before_action do
+        push_frontend_feature_flag(:integration_form_sections, group, default_enabled: :yaml)
+      end
+
       feature_category :integrations
 
       layout 'group_settings'

app/controllers/projects/services_controller.rb

@@ -13,6 +13,10 @@ class Projects::ServicesController < Projects::ApplicationController
   before_action :set_deprecation_notice_for_prometheus_integration, only: [:edit, :update]
   before_action :redirect_deprecated_prometheus_integration, only: [:update]
 
+  before_action do
+    push_frontend_feature_flag(:integration_form_sections, project, default_enabled: :yaml)
+  end
+
   respond_to :html
 
   layout "project_settings"

app/helpers/integrations_helper.rb

@@ -83,6 +83,7 @@ module IntegrationsHelper
       comment_detail: integration.comment_detail,
       learn_more_path: integrations_help_page_path,
       trigger_events: trigger_events_for_integration(integration),
+      sections: integration.sections.to_json,
       fields: fields_for_integration(integration),
       inherit_from_id: integration.inherit_from_id,
       integration_level: integration_level(integration),

app/models/integration.rb

@@ -37,6 +37,8 @@ class Integration < ApplicationRecord
     Integrations::BaseSlashCommands
   ].freeze
 
+  SECTION_TYPE_CONNECTION = 'connection'
+
   serialize :properties, JSON # rubocop:disable Cop/ActiveRecordSerialize
 
   attribute :type, Gitlab::Integrations::StiType.new
@@ -360,6 +362,10 @@ class Integration < ApplicationRecord
     []
   end
 
+  def sections
+    []
+  end
+
   def password_fields
     fields.select { |f| f[:type] == 'password' }.pluck(:name)
   end

app/models/integrations/jira.rb

@@ -112,7 +112,7 @@ module Integrations
 
     def help
       jira_doc_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: help_page_url('integration/jira/index.html') }
-      s_("JiraService|You need to configure Jira before enabling this integration. For more details, read the %{jira_doc_link_start}Jira integration documentation%{link_end}.") % { jira_doc_link_start: jira_doc_link_start, link_end: '</a>'.html_safe }
+      s_("JiraService|You must configure Jira before enabling this integration. For more details, read the %{jira_doc_link_start}Jira integration documentation%{link_end}.") % { jira_doc_link_start: jira_doc_link_start, link_end: '</a>'.html_safe }
     end
 
     def title
@@ -130,6 +130,7 @@ module Integrations
     def fields
       [
         {
+          section: SECTION_TYPE_CONNECTION,
           type: 'text',
           name: 'url',
           title: s_('JiraService|Web URL'),
@@ -138,12 +139,14 @@ module Integrations
           required: true
         },
         {
+          section: SECTION_TYPE_CONNECTION,
           type: 'text',
           name: 'api_url',
           title: s_('JiraService|Jira API URL'),
           help: s_('JiraService|If different from Web URL.')
         },
         {
+          section: SECTION_TYPE_CONNECTION,
           type: 'text',
           name: 'username',
           title: s_('JiraService|Username or Email'),
@@ -151,6 +154,7 @@ module Integrations
           required: true
         },
         {
+          section: SECTION_TYPE_CONNECTION,
           type: 'password',
           name: 'password',
           title: s_('JiraService|Password or API token'),
@@ -162,6 +166,16 @@ module Integrations
       ]
     end
 
+    def sections
+      [
+        {
+          type: SECTION_TYPE_CONNECTION,
+          title: s_('Integrations|Connection details'),
+          description: help
+        }
+      ].freeze
+    end
+
     def web_url(path = nil, **params)
       return '' unless url.present?
 

app/serializers/service_field_entity.rb

@@ -4,7 +4,7 @@ class ServiceFieldEntity < Grape::Entity
   include RequestAwareEntity
   include Gitlab::Utils::StrongMemoize
 
-  expose :type, :name, :placeholder, :required, :choices, :checkbox_label
+  expose :section, :type, :name, :placeholder, :required, :choices, :checkbox_label
 
   expose :title do |field|
     non_empty_password?(field) ? field[:non_empty_password_title] : field[:title]

config/feature_flags/development/integration_form_sections.yml

+---
+name: integration_form_sections
+introduced_by_url: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/80712
+rollout_issue_url: https://gitlab.com/gitlab-org/gitlab/-/issues/352827
+milestone: '14.9'
+type: development
+group: group::integrations
+default_enabled: false

locale/gitlab.pot

@@ -19645,6 +19645,9 @@ msgstr ""
 msgid "Integrations|Comment settings:"
 msgstr ""
 
+msgid "Integrations|Connection details"
+msgstr ""
+
 msgid "Integrations|Connection failed. Please check your settings."
 msgstr ""
 
@@ -20896,7 +20899,7 @@ msgstr ""
 msgid "JiraService|Work on Jira issues without leaving GitLab. Adds a Jira menu to access your list of Jira issues and view any issue as read-only."
 msgstr ""
 
-msgid "JiraService|You need to configure Jira before enabling this integration. For more details, read the %{jira_doc_link_start}Jira integration documentation%{link_end}."
+msgid "JiraService|You must configure Jira before enabling this integration. For more details, read the %{jira_doc_link_start}Jira integration documentation%{link_end}."
 msgstr ""
 
 msgid "Job"

spec/serializers/service_field_entity_spec.rb

@@ -20,6 +20,7 @@ RSpec.describe ServiceFieldEntity do
 
         it 'exposes correct attributes' do
           expected_hash = {
+            section: 'connection',
             type: 'text',
             name: 'username',
             title: 'Username or Email',
@@ -40,6 +41,7 @@ RSpec.describe ServiceFieldEntity do
 
         it 'exposes correct attributes but hides password' do
           expected_hash = {
+            section: 'connection',
             type: 'password',
             name: 'password',
             title: 'Enter new password or API token',
@@ -64,6 +66,7 @@ RSpec.describe ServiceFieldEntity do
 
         it 'exposes correct attributes and casts value to Boolean' do
           expected_hash = {
+            section: nil,
             type: 'checkbox',
             name: 'send_from_committer_email',
             title: 'Send from committer',
@@ -84,6 +87,7 @@ RSpec.describe ServiceFieldEntity do
 
         it 'exposes correct attributes' do
           expected_hash = {
+            section: nil,
             type: 'select',
             name: 'branches_to_be_notified',
             title: 'Branches for which notifications are to be sent',