Add trigger section definition to form for MS Teams integration

What does this MR do and why?

Add the frontend portion of implementing sections for MS Teams integration. Since Trigger is a new type of section, this MR adds it and updates the UI to match current designs.

⚠ Note ⚠

There are no actual changes to the current UI. The changes will only be applied with a backend change in a separate MR (diff available below).

Changelog: changed

Screenshots or screen recordings

Before	After (with diff applied)

How to set up and validate locally

1. Go to Project > Settings > Integrations > Microsoft Teams notifications. For example, http://127.0.0.1:3000/gitlab-org/gitlab-shell/-/settings/integrations/microsoft_teams/edit.
2. Apply the following diff to enable sections for the form:

diff --git a/app/models/integration.rb b/app/models/integration.rb
index a16e8dc960a..dae4135fa97 100644
--- a/app/models/integration.rb
+++ b/app/models/integration.rb
@@ -48,6 +48,7 @@ class Integration < ApplicationRecord
   ].freeze
 
   SECTION_TYPE_CONNECTION = 'connection'
+  SECTION_TYPE_TRIGGER = 'trigger'
 
   attr_encrypted :properties,
                  mode: :per_attribute_iv,
diff --git a/app/models/integrations/microsoft_teams.rb b/app/models/integrations/microsoft_teams.rb
index 71cd4ddaf82..0e8734bffe8 100644
--- a/app/models/integrations/microsoft_teams.rb
+++ b/app/models/integrations/microsoft_teams.rb
@@ -35,7 +35,7 @@ def self.supported_events
 
     def default_fields
       [
-        { type: 'text', name: 'webhook', placeholder: "#{webhook_placeholder}" },
+        { type: 'text', section: SECTION_TYPE_CONNECTION, name: 'webhook', required: true, placeholder: "#{webhook_placeholder}" },
         { type: 'checkbox', name: 'notify_only_broken_pipelines', help: 'If selected, successful pipelines do not trigger a notification event.' },
         {
           type: 'select',
@@ -46,6 +46,21 @@ def default_fields
       ]
     end
 
+    def sections
+      [
+        {
+          type: SECTION_TYPE_CONNECTION,
+          title: s_('Integrations|Connection details'),
+          description: help
+        },
+        {
+          type: SECTION_TYPE_TRIGGER,
+          title: s_('Integrations|Trigger'),
+          description: s_('Integrations|An event will be triggered when one of the following items happen.')
+        }
+      ]
+    end
+
     private
 
     def notify(message, opts)

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

• I have evaluated the MR acceptance checklist for this MR.

Related to #332293 (closed)